<template>
<!--  滚动条标签-->

  <div id="A_F" style="background-color: black;text-align: center"class="scrollbar-demo-item">
    <el-scrollbar>
    <el-container>
      <el-main>
<!--主标题-->
          <h1 >新闻</h1>
        <div style=" margin-left: 15%; width: 65%">
        <el-row :gutter="10" >
          <!--        单元格-->
          <el-col :span="8" v-for=" c in cell">
            <div style="margin: 5px">
            <!--            图片单元-->
            <img id="img" :src="c.imgUrl" >
            <!--            文本框单元-->
            <article class="text">
              <h3 id="t1">{{c.text1}}</h3>
              <p id="ar1">{{c.text2}}</p>
              <a id="hre" :href="c.Href">LEARN MORE</a>
            </article>
            </div>
          </el-col>
        </el-row>
        </div>
        <img src="imgs/16.png" width="100%">
        <div class="fot">
          <img src="imgs/17.svg" width="50" height="50px" class="fotimg" style="margin-left: 20px">
          <img src="imgs/18.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/19.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/20.svg" width="50" height="50px" class="fotimg">
          <img src="imgs/21.svg" width="50" height="50px" class="fotimg" style="margin-right: 0">
        </div>
        <div class="fot2" style="margin-bottom: 30px">
          <img src="imgs/22.webp" width="100px" style="margin-right: 20px;margin-left: 10px">
          <img src="imgs/23.webp" width="100px" style="margin-right: 0px">
        </div>
        <div style="background-color: black;height: 700px">
          <div style="color: white;text-align: center" class="fott" >
            <ul >
              <li style="margin-left: 20px">隐私权政策</li>
              <li>服务条款</li>
              <li>COOKIE条款</li>
              <li>COOKIE 2K广告合作伙伴</li>
            </ul>
          </div>

          <div style="color: white;text-align: center;margin-top: 20px" class="fotbot" >
            <ul >
              <li >太原学府中学</li>
              <li>项目经理：吴林峰</li>
              <li>班主任：张雨</li>
              <li>小组成员：陈子冬、常浩东、李旋、朱钰灏</li>
            </ul>
          </div>
        </div>
      </el-main>
    </el-container>
    </el-scrollbar>
  </div>
</template>

<script setup>
import {ref} from "vue";
/*图片&文本框&超链接的网址具体内容*/
const cell=ref([
  { imgUrl:'news_img/news_1.jpg', text1:'NINTENDO SWITCH版《无主之地3》终极版更新提示',
    text2:'阅读Nintendo Switch版《无主之地3》终极版的最新更新提示',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-nintendo-switch-update-notes/'},
  { imgUrl:'news_img/news_2.jpg', text1:'《无主之地3》终极版现已登录NINTENDO SWITCH!',
    text2:'即刻起，无论是在家里还是旅途中，打开Nintendo Switch到《无主之地3》中尽情躁事无限！',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-ultimate-edition-nintendo-switch/'},
  { imgUrl:'news_img/news_3.jpg', text1:'《无主之地：潘多拉魔盒典藏版》现已发布！ 无主之地3将在10月6日登陆SWITCH！',
    text2:'现在就用这个满是混乱的游戏包将所有六场《无主之地》大冒险一网打尽，《无主之地3》将于10月6日登陆Switch，还有更多精彩内容！',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-collection-pandoras-box/'},
  { imgUrl:'news_img/news_4.jpg', text1:'《无主之地》混乱月即刻开启',
    text2:'混乱月期间，玩家可以在多款《无主之地》系列游戏中获得奖励，此外，《无主之地3》“宇宙夺宝”迷你活动也将重磅回归！',
    Href:'https://borderlands.2k.com/zh-CN/news/month-of-mayhem/'},
  { imgUrl:'news_img/news_5.jpg', text1:'《无主之地3》基本要领：上手的9个要点',
    text2:'阅读以下《无主之地3》要领，化身秘藏猎人潇洒走四方。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-tips/'},
  { imgUrl:'news_img/news_6.jpg', text1:'《无主之地3》游戏早期BOSS攻略',
    text2:'这些《无主之地3》boss攻略将能帮助你征服游戏早期的艰难挑战。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-boss-tips/'},
  { imgUrl:'news_img/news_7.jpg', text1:'《无主之地3：猎杀》 快速指南',
    text2:'快速了解《无主之地 3》中的两个极其困难的任务：“猎杀！马里旺秘密设施”和“猎杀！护卫者缺口”。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-takedown-guides/'},
  { imgUrl:'news_img/news_8.jpg', text1:'《无主之地3》SHIFT代码',
    text2:'使用免费的Gearbox SHiFT账号，通过兑换SHiFT代码来换取一些劲爆的《无主之地3》战利品吧！',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-shift-codes/'},
  { imgUrl:'news_img/news_9.jpg',
    text1:'《无主之地3》当季活动指南',
    text2:'如何随时随心游玩《无主之地3》包括“血腥收获节”、“伤心日”和“恩怨风云”在内的所有的当季活动！',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-seasonal-events/'},
  { imgUrl:'news_img/news_10.jpg', text1:'《无主之地3》混乱模式指南',
    text2:'《无主之地3》混乱模式会带来终极终局之战，你将有更多机会获得更赞的战利品！',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-mayhem-mode/'},
  { imgUrl:'news_img/news_11.jpg', text1:'秘藏卡片和钻石钥匙快速指南',
    text2:'带你快速了解《无主之地3：导演剪辑版》DLC中包含的秘藏卡片和钻石钥匙！',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-vault-cards/'},
  { imgUrl:'news_img/news_12.jpg', text1:'（更新）《无主之地3》ECHO直播扩展程序指南',
    text2:'利用Twitch上高交互性的ECHO直播扩展程序，提升《无主之地3》直播体验。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-echocast-twitch-extension/'},
  { imgUrl:'news_img/news_13.jpg', text1:'游览避难所3号',
    text2:'在避难所3号这艘漂亮飞船上，你将见到不少熟悉的面孔。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-sanctuary-iii/'},
  { imgUrl:'news_img/news_14.jpg', text1:'即将推出疯狂厄尔的重刷机和莫里斯的黑市贩卖机！',
    text2:'即将推出疯狂厄尔的重刷机和莫里斯的黑市贩卖机！',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-crazy-earl-reroll-maurice-black-market-vending-machine/'},
  { imgUrl:'news_img/news_15.jpg', text1:'《无主之地3》主编剧畅谈最为震撼的删减剧情',
    text2:'在《导演剪辑版》的幕后花絮中，玩家们将体验到《无主之地3》中最令人动情的删减剧情。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-directors-cut-maya-deleted-scene/'},
  { imgUrl:'news_img/news_16.jpg', text1:'快将《无主之地3》虚拟背景加入视频通话，一起感受躁动无限！',
    text2:'立即下载最新一批虚拟背景，为视频通话注入《无主之地3》的浓厚氛围！',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-virtual-backgrounds/'},
  { imgUrl:'news_img/news_17.jpg', text1:'立即开玩“无主之地科学”吧！',
    text2:'在《无主之地3》中立即开玩“无主之地科学”，赢取独特奖励，并协助科学家绘制人体肠道微生物。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-science/'},
  { imgUrl:'news_img/news_18.jpg', text1:'关于提丰·德莱昂的问答',
    text2:'《无主之地3》剧情合著者Danny Homan将对社区中关于秘藏猎人祖师爷提丰·德莱昂的问题进行解答。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-typhon-questions-answered/'},
  { imgUrl:'news_img/news_19.jpg', text1:'塑造角色：提丰·德莱昂，初代秘藏猎人',
    text2:'塑造角色：提丰·德莱昂，初代秘藏猎人',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-building-typhon/'},
  { imgUrl:'news_img/news_20.jpg', text1:'GEARBOX创始人兰迪·皮奇福德的来信',
    text2:'Gearbox Entertainment Company创始人兰迪·皮奇福德所撰写的《无主之地》十周年庆的信件。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-10-year-anniversary-letter/'},
  { imgUrl:'news_img/news_21.jpg', text1:'来自《无主之地3》创意总监的一封信',
    text2:'创意总监Paul Sage写了封信庆祝《无主之地3》正式发售。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-launch-letter/'},
  { imgUrl:'news_img/news_22.jpg', text1:'来认识《无主之地3》作曲家',
    text2:'听听看《无主之地3》的音乐并认识创造这些音乐的出色作曲家。',
    Href:'https://borderlands.2k.com/zh-CN/news/borderlands-3-music-composers/'},
]);


</script>

<style scoped>
#A_F{
  width: 100%;
  height: 100%;
  left: 0;
  border-color: black;
  position: fixed;
}
#img{
  height: 100%;
  width: 100%;

}
h1{
  color: #FCEE00;
  font: 55px CountachBold,sans-serif;
}
.text{
  color: #FFF;
  text-align: center;
}
#t1{
  font: 30px CountachBold,sans-self;
  font-weight:400 ;
  line-height: normal;
}
#ar1{
  font: 22.5px titillium-web,san-serif;
}
#hre{
  color:rgb(0,17,244);
  font: 25px CountachBold,sans-serif;
  font-style: normal;
  font-weight: 400 ;
}
</style>
